<template>
  <div class="all-page-heiht">
    <el-row class="goods-list-title"><h1>产品信息查看</h1> </el-row>
    <!-- 搜索区 -->
    <!-- <el-card class="card-search">
      <el-form inline>
        <el-form-item label="产品名:"><el-input v-model="goodNameSearch"></el-input></el-form-item>
        <el-form-item>
          <el-button type="success" round icon="Search" @click="goodSearchBtn">查询</el-button>
          <el-button round type="primary" icon="Refresh" @click="goodNameSearch=''" >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card> -->

    <el-card class="el-card-main">
      <el-row class="addBtn">
        <el-button
          size="default"
          type="primary"
          @click="addGoodsDialogVisibleBtn"
          icon="Plus"
          style="backgroundcolor:#529b2e"
          >新增</el-button
        >
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        v-loading="loading"
     
      >
      
        <el-table-column prop="goodName" label="产品名字" />
        <el-table-column prop="goodSale" label="产品销量" />
        <el-table-column prop="goodStock" label="产品库存" />
        <el-table-column prop="goodPrice" label="产品价格" />
        <el-table-column label="产品状态" width="120">
          <template #default="props">
            <el-tag type="success" v-if="props.row.status == 1" effect="dark"
              >可参与活动</el-tag
            >
            <el-tag
              type="danger"
              v-else-if="props.row.status == 2"
              effect="dark"
              >售罄</el-tag
            >
            <el-tag type="info" effect="dark" v-else>下架中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="props">
            <el-button
              type="primary"
              size="small"
              round
              @click="checkGoodsBtn(props.row.goodId)"
            >
              <el-icon> <pointer /></el-icon>
              查看
            </el-button>
            <el-button
              type="warning"
              round
              size="small"
              @click="goodsEditBtn(props.row.goodId)"
            >
              <el-icon><edit /></el-icon> 编辑</el-button
            >
            <el-button
              type="danger"
              @click="goodsDeleteBtn(props.row)"
              round
              size="small"
            >
              <el-icon><delete /></el-icon> 删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
       <el-row class="el-row-center">
      <el-pagination
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
       </el-row>
      <!-- 添加商品区域 -->
      <el-dialog v-model="addGoodsDialogVisible" title="新增商品" width="30%">
        <el-form :model="addGoodFromData" size="small">
          <el-form-item label="产品名称">
            <el-input v-model="addGoodFromData.goodName"></el-input>
          </el-form-item>
          <el-form-item label="产品介绍">
            <el-input v-model="addGoodFromData.goodDetail"></el-input>
          </el-form-item>
          <el-form-item label="产品价格">
            <el-input v-model="addGoodFromData.goodPrice" placeholder="请输入数字！"></el-input>
          </el-form-item>
          <el-form-item label="产品库存">
            <el-input v-model="addGoodFromData.goodStock"></el-input>
          </el-form-item>
          <el-form-item label="产品状态" size="small">
            <el-radio
              v-model="addGoodFromData.goodStatus"
              label="1"
              size="small"
              >直接上架</el-radio
            >
            <el-radio
              v-model="addGoodFromData.goodStatus"
              label="0"
              size="small"
              >先下架</el-radio
            >
            <el-radio
              v-model="addGoodFromData.goodStatus"
              label="2"
              size="small"
              >售罄</el-radio
            >
          </el-form-item>
          <!-- <el-form-item label="产品图片链接">
            <el-input v-model="addGoodFromData.goodImg"></el-input>
          </el-form-item> -->

          <el-form-item label="限购量:">
            <el-input-number
              v-model="addGoodFromData.limitNum"
              :min="1"
              :max="1"
              disabled
            />
          </el-form-item>
          <el-form-item label="用户须知:"
            ><el-input v-model="addGoodFromData.notice"></el-input
          ></el-form-item>
          <el-form-item label="产品说明:"
            ><el-input v-model="addGoodFromData.manual"></el-input
          ></el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addGoodsDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmAdd">确定添加</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑商品 -->
      <el-dialog v-model="editGoodsDialogVisible" title="编辑商品" width="30%">
        <el-form :model="editGoodDetailFormData" size="small">
          <el-form-item label="产品名称">
            <el-input v-model="editGoodDetailFormData.goodName"></el-input>
          </el-form-item>
          <el-form-item label="产品介绍">
            <el-input v-model="editGoodDetailFormData.goodDetail"></el-input>
          </el-form-item>
          <el-form-item label="产品价格">
            <el-input v-model="editGoodDetailFormData.goodPrice"></el-input>
          </el-form-item>
          <el-form-item label="产品库存">
            <el-input v-model="editGoodDetailFormData.goodStock"></el-input>
          </el-form-item>
          <el-form-item label="产品状态" size="small">
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="1"
              size="small"
              >上架中</el-radio
            >
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="0"
              size="small"
              >下架</el-radio
            >
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="2"
              size="small"
              >售罄</el-radio
            >
          </el-form-item>
          <!-- <el-form-item label="产品图片链接">
            <el-input v-model="editGoodDetailFormData.goodImg"></el-input>
          </el-form-item> -->

          <el-form-item label="限购量:">
            <el-input-number
              v-model="editGoodDetailFormData.limitNum"
              :min="1"
              :max="1"
              disabled
            />
          </el-form-item>
          <el-form-item label="用户须知:"
            ><el-input v-model="editGoodDetailFormData.notice"></el-input
          ></el-form-item>
          <el-form-item label="产品说明:"
            ><el-input v-model="editGoodDetailFormData.manual"></el-input
          ></el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editGoodsDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmEdit">确定修改</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 查看商品 -->
      <el-dialog v-model="checkGoodsDialogVisible" title="查看商品" width="30%">
        <el-form :model="editGoodDetailFormData" size="small">
          <el-form-item label="产品名称">
            <el-input
              v-model="editGoodDetailFormData.goodName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="产品介绍">
            <el-input
              v-model="editGoodDetailFormData.goodDetail"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="产品价格">
            <el-input
              v-model="editGoodDetailFormData.goodPrice"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="产品库存">
            <el-input
              v-model="editGoodDetailFormData.goodStock"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="产品状态" size="small">
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="1"
              size="small"
              disabled
              >上架中</el-radio
            >
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="0"
              size="small"
              disabled
              >下架</el-radio
            >
            <el-radio
              v-model="editGoodDetailFormData.goodStatus"
              :label="2"
              size="small"
              disabled
              >售罄</el-radio
            >
          </el-form-item>
          <!-- <el-form-item label="产品图片链接">
            <el-input
              v-model="editGoodDetailFormData.goodImg"
              disabled
            ></el-input>
          </el-form-item> -->

          <el-form-item label="限购量:">
            <el-input-number
              v-model="editGoodDetailFormData.limitNum"
              :min="1"
              disabled
              :max="10"
            />
          </el-form-item>
          <el-form-item label="用户须知:"
            ><el-input
              v-model="editGoodDetailFormData.notice"
              disabled
            ></el-input
          ></el-form-item>
          <el-form-item label="产品说明:"
            ><el-input
              v-model="editGoodDetailFormData.manual"
              disabled
            ></el-input
          ></el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="checkGoodsDialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import {
  ApiGoodsList,
  ApiGoodsDelete,
  ApiGoodsAdd,
  ApiGoodsEdit,
  ApiGoodsDetail,
  ApiGoodsSearch
} from "@/api/index";
import { ElMessageBox } from "element-plus";
import { successMessage, errorMessage, infoMessage } from "@/utils/messageTips";
export default defineComponent({
  name: "GoodsInfo",
  setup() {
    // 用到的东西
    let usedInfo = reactive<IGPageInfo>({
      pageNum: 1,
      total: 2,
      pages: 2,
      pageSize: 15,
    });
    let tableData = ref<Array<any>>();
    // 获取商品列表
    let loading = ref<boolean>(true);
    const getGoodsList = async () => {
      loading.value = true
      const { data: res } = (await ApiGoodsList(usedInfo.pageNum)) as Record<
        string,
        any
      >;
      tableData.value = res.list;
      usedInfo.total = res.total;
      usedInfo.pages = res.pages;
      usedInfo.pageSize = res.pageSize
      loading.value = false;
    };

    // 改变页码
    const handleCurrentChange = (val: number) => {
      usedInfo.pageNum = val;
      getGoodsList();
    };
    // 删除按钮
    const goodsDeleteBtn = async (goodsinfo: any) => {
      let name = goodsinfo.goodName;
      let id = goodsinfo.goodId;
      ElMessageBox.confirm(`你确定将删除产品${name}吗？`, "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消删除",
        type: "warning",
      })
        .then(async () => {
          const res = (await ApiGoodsDelete(id)) as Record<string, any>;
      
          successMessage(res.message);
          getGoodsList();
        })
        .catch(() => {
          infoMessage("您取消了删除");
        });
    };

    // 添加商品对话框区域
    const addGoodsDialogVisible = ref<boolean>(false);

    let addGoodFromData = reactive<IGAddGoodForm>({
      goodName: null,
      goodDetail: null,
      goodPrice: null,
      goodStock: 100,
      goodStatus: null,
      goodImg: "",
      manual: null,
      limitNum: 1,
      notice: "",
    });

    const addGoodsDialogVisibleBtn = () => {
      for (let key in addGoodFromData) {
        addGoodFromData[key as keyof Omit<IGAddGoodForm, "limitNum">] = null;
      }
      addGoodFromData.goodImg="sanxiang.com"
      addGoodFromData.limitNum = 1;
      addGoodFromData.goodStock = 100;
      addGoodsDialogVisible.value = true;
    };

    const confirmAdd = async () => {
     
      const res = (await ApiGoodsAdd(addGoodFromData)) as Record<string, any>;
      
      addGoodsDialogVisible.value = false;
      getGoodsList();
      successMessage(res.message);
    };

    // 编辑商品对话框区域
    const editGoodsDialogVisible = ref<boolean>(false);
    let editGoodDetailFormData = ref<IGGoodDetailForm>({
      id: 0,
      goodName: "",
      goodDetail: "",
      goodPrice: null,
      goodStock: null,
      goodStatus: 1,
      goodImg: "sanxiang.com",
      goodSales: 0,
      notice: "",
      manual: "",
      limitNum: 1,
    });

    let editGoodFormData = reactive<IGGoodEditForm>({
      id: 1,
      goodName: "",
      goodDetail: "",
      goodPrice: 0,
      goodStock: 0,
      goodStatus: 1,
      goodImg: "sanxiang.com",
      notice: "",
      manual: "",
      limitNum: 1,
      goodSales: 9,
    });

    const goodsEditBtn = async (goodId: number) => {
      const { data: res } = await ApiGoodsDetail(goodId);
      editGoodDetailFormData.value = res as IGGoodDetailForm;
      editGoodsDialogVisible.value = true;
    };
    const confirmEdit = async () => {
      
      Object.assign(editGoodFormData, editGoodDetailFormData.value);
      const res = (await ApiGoodsEdit(editGoodDetailFormData.value)) as Record<
        string,
        any
      >;
      successMessage(res.message);
      getGoodsList();
      editGoodsDialogVisible.value = false;
    };
    // 查看商品

    let checkGoodsDialogVisible = ref<boolean>(false);
    const checkGoodsBtn = async (id: number) => {
      const { data: res } = await ApiGoodsDetail(id);
     
      editGoodDetailFormData.value = res as IGGoodDetailForm;
      checkGoodsDialogVisible.value = true;
    };

    // 搜索区
    let goodNameSearch = ref<string>("");
   const goodSearchBtn = async ()=>{
     const res = await ApiGoodsSearch(goodNameSearch.value)
     
   }


// 状态选择
    let selectOptions = [
      { label: "售罄", value: "0" },
      { label: "上架中", value: "1" },
      { label: "下架中", value: "2" },
    ];

    // 钩子函数
    onMounted(() => {
      getGoodsList();
    });

    return {
      ...toRefs(usedInfo),
      tableData,
      handleCurrentChange,
      goodsDeleteBtn,
      addGoodsDialogVisible,
      addGoodsDialogVisibleBtn,
      addGoodFromData,
      confirmAdd,
      editGoodDetailFormData,
      editGoodsDialogVisible,
      goodsEditBtn,
      confirmEdit,
      loading,
      goodNameSearch,
      selectOptions,
      checkGoodsDialogVisible,
      checkGoodsBtn,
      goodSearchBtn
    };
  },
});
</script>
<style lang="less" scoped>
.addBtn {
  margin-top: -12px;
}
.el-card {
  height: 100%;
}
.goods-list-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
.card-search .el-form-item {
  margin-bottom: 0px;
}
</style>
